<template>
  <div>
    <a-card :bordered="false" style="margin-bottom: 10px">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <a-form-model layout="inline" ref="ruleForm" :model="queryParam">
          <z-form-item :datas="fieldArr" :form="queryParam" :submitAction="{ show: true, toggle: false, span: 6 }"
            @change="getChangeTime" @onSubmit="onQuery" @onReset="onResetForm" />
        </a-form-model>
      </div>
    </a-card>
    <a-card :bordered="false">
      <!-- 表格展示 -->
      <div class="table-page-content">
        <z-table ref="table" rowKey="id" :showAlert="false" :showSelection="false" :loading="loading" :columns="columns"
          :dataSource="pageData" @change="onTableChange" />
      </div>
    </a-card>
  </div>
</template>

<script>
import * as flowServiceApi from '@/api/sjsk/flowService'
export default {
  props: { tabValue: Number },
  data() {
    return {
      loading: false,
      queryParam: {},
      fieldArr: [
        { label: '类型', prop: 'type', tagType: 'dict-select', dictCode: 'process_approval_type', span: 6 },
        { label: '申请时间', prop: 'applicationTime', tagType: 'range-picker', format: 'YYYY-MM-DD', span: 6 },
        { label: '流程状态', prop: 'processStatus', tagType: 'dict-select', dictCode: 'process_approval_state', span: 6 },
      ],
      columns: [
        {
          title: '序号', dataIndex: 'order', width: 60, align: 'center',
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize +
            (index + 1)}` //序号分页后连续
        },
        {
          title: '编号',
          dataIndex: 'approvalNumber',
          width: 100,
          align: 'left',
          customRender: (text) => {
            return <j-ellipsis value={text} length={16} />
          },
        },
        {
          title: '类型', dataIndex: 'processType', width: 120, align: 'center',
          customRender: (text) => {
            return <j-ellipsis value={this.$filterDictTextByCache('process_approval_type', text)} length={20} />
          }
        },
        {
          title: '流程状态', dataIndex: 'processStatus', width: 70, align: 'center',
          customRender: (text, record, index) => {
            return (<span>
              <j-ellipsis
                class={text == 1 ? 'text_color_1' : text == 2 ? 'text_color_1' : text == 4 ? 'text_color_2' : ''}
                value={this.$filterDictTextByCache('process_approval_state', text)}
                length={14}
              />
              {text == 4 && record.remark ?
                <a-tooltip placement="topLeft" title={record.remark} style={'paddingLeft:5px;'}>
                  <a-icon type="question-circle" />
                </a-tooltip>
                : null}
            </span>
            )
          }
        },
        { title: '申请时间', dataIndex: 'applyTime', width: 80, align: 'center' },
        {
          title: '更新时间', dataIndex: 'updateTime', width: 100, align: 'center',
          customRender: (text) => {
            return text ? text : '--'
          }
        },
        {
          title: '操作',
          width: 80,
          align: 'center',
          dataIndex: 'action',
          customRender: (text, record, index) => {
            return (
              <a-space size={0}>
                <a-button onClick={(event) => this.handleDetails(record)} type="link" style="padding:0;"> 详情 </a-button>
                {record.processStatus == 1 ? <span>
                  <a-divider type='vertical' />
                  <a-button onClick={(event) => this.onCancel(record)} type="link" style="padding:0;"> 撤销申请 </a-button>
                </span> : record.processStatus == 5 || record.processStatus == 4 ? <span>
                  {/* <a-divider type='vertical' />
                  <a-button onClick={(event) => this.onRestart(record)} type="link" style="padding:0;"> 重新申请 </a-button> */}
                </span> : null}
              </a-space>
            )
          }
        }
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10,
      },
      pageData: {}
    }
  },
  mounted() {
    this.onQuery()
  },
  methods: {
    onQuery() {
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },
    onResetForm() {
      this.queryParam = {}
      this.pageFilter.pageNo = 1
      this.pageFilter.pageSize = 10
      this.refreshTable()
    },
    onTableChange(pagination, pageFilter, sorter) {
      this.pageFilter = Object.assign({}, this.pageFilter, pagination)
      this.refreshTable()
    },
    refreshTable() {
      let { applicationTime, ...dataParam } = this.queryParam // 剔除applicationTime元素，dataParam最新的对象
      let queryParam = Object.assign({}, dataParam, this.pageFilter)
      this.loading = true
      flowServiceApi
        .getMyApplyList(queryParam)
        .then((res) => {
          this.loading = false
          if (res.success) {
            this.pageData = res.result ? res.result : {}
            this.loading = false
          }
        })
        .catch((e) => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    // 详情
    handleDetails(record) {
      this.$router.push({
        path: `/examine/details/${record.processType}/${record.taskId}`,
        query: { tab: this.tabValue },
      })
    },
    // 撤销申请
    onCancel(record) {
      console.log(record)
      let that = this
      let title = '撤销申请'
      let content = <div style="color:#999;">操作后不可恢复</div>
      this.$confirm({
        title: `确定${title}?`,
        content: h => content,
        onOk() {
          let api = flowServiceApi.cancel({ taskId: record.taskId, type: record.processType })
          api.then((res) => {
            if (res.success) {
              that.$message.success(res.message ? res.message : '操作成功')
              that.onQuery()
            } else {
              that.$message.warn(res.message ? res.message : '操作失败')
            }
          }).catch(e => {
            that.$message.warn("操作失败！")
          })
        },
        class: 'confirm',
      })
    },
    //重新申请
    onRestart(record) {
      let url = ''
      let key = ""
      switch (record.processType) {
        case 1:
          url = '/rehabilitationWorkers/list' //变更执行地
          key = 'remove-assgin'
          break;
        case 2:
          url = '/rehabilitationWorkers/list' //申请异地管控（和转出省外一个框体）
          key = 'apply-remote-control'
          break;
        case 4:
          url = '/remoteControl/appl' //省外异地管控-外省转入
          key = '' //是一个页面，非弹框
          break;
        case 5:
          url = '/rehabilitationWorkers/list' //省外异地管控-转出省外（和申请异地管控一个框体）
          key = 'apply-remote-control'
          break;
        case 6:
          url = '/remoteControl/extraprovincial' //省外异地管控-转出省外-异常上报
          key = 'exception-reporting'
          break;
        case 7:
          url = '/rehabilitationWorkers/list' //同城转介
          key = 'intra-city-referral'
          break;
        case 8:
          url = 'remoteControl/provincial' //撤销异地管控（省内）
          key = 'cancel-remote-control'
          break;
        case 9:
          url = 'remoteControl/extraprovincial' //撤销省外异地管控-外省转入
          key = 'cancel-remote-control'
          break;
        case 10:
          url = 'remoteControl/wdappl' //撤销省外异地管控-转出省外
          break;
        case 13:
          url = '/rehabilitationWorkers/list' //社戒社康人员-请假
          key = 'ask-for-leave'
          break;
        case 14:
          url = '/rehabilitationWorkers/list' //社戒社康人员-中止
          key = 'discontinue'
          break;
        case 16:
          url = '/caseEstimate' //结案评估
          break;
        case 18:
          url = '/uroscopy/index' //取消常规尿液检测审批
          break;
        case 19:
          url = '/uroscopy/index' //取消常规尿液检测审批
          break;
        case 20:
          url = '/hairCheck/index' //取消常规毛发检测审批
          break;
        case 21:
          url = '/hairCheck/index' //取消常规毛发检测审批
          break;
        case 22:
          url = '/interview/interviewIndex' //访谈逾期补录审批
          break;
        case 23:
          url = '/uroscopy/index' //尿检逾期补录审批
          break;
        case 24:
          url = '/interview/interviewIndex' //取消定期访谈审批
          break;
        case 25:
          url = '/specialPopulation/index' //特殊人群处置审批
          break;
        case 26:
          url = '/totalEstimate' //季度评估审批
          break;
        case 27:
          url = '/totalEstimate' //年度评估审批
          break;
        case 28:
          url = '/totalEstimate' //季度评估补录审批
        case 29:
          url = '/totalEstimate' //年度评估补录审批
          break;
        case 32:
          url = '/activity/group/list' //小组活动申请审批
          break;
        case 37:
          url = '/activity/community/list' //社区活动申请审批
          break;
        case 38:
          url = '' //所内介入申请审批
          break;
        case 39:
          url = '/treat/personnel' //转诊申请审批
          break;
        case 40:
          url = '/risk/list' //风险等级评估审批
          break;
        case 41:
          url = '' //告警事件
          break;
        case 42:
          url = 'legalAid/consult/index' //法律援助申请审批
          break;
        case 43:
          url = '' //逾期报道审批
          break;
        case 44:
          url = '/psycholog/consult' //心理咨询申请
          break;
        case 45:
          url = '/treat/personnel' //美沙酮入组申请
          break;
        case 46:
          url = '/personnel/personnel' //专干人员请假审批
          break;
        case 47:
          url = '/personnel/personnel' //专干人员离职审批
          break;
        case 48:
          url = '/rehabilitationWorkers/list' //继续执行
          key = 'continueDiscontinue'
          break;
        default:
          url = ''
          this.showAlert(record)
      }
      if (url != '') {
        this.getApprovalId(url, key, record)
      }
    },
    // 审批详情信息
    async getApprovalId(url, key, record) {
      await flowServiceApi.getApprovalId({ taskId: record.taskId, type: record.processType }).then(res => {
        if (res.success) {
          const { result } = res
          let jsonParam = result.jsonParam ? JSON.parse(result.jsonParam) : {}
          // console.log(this.jsonParam);
          this.$router.push({
            path: url,
            query: { jsonParam: jsonParam, key: key },
          })
        }
      })
    },
    showAlert(record) {
      let that = this
      let title = '重新申请'
      let content = <div style="color:#999;">操作后不可恢复</div>
      this.$confirm({
        title: `确定${title}?`,
        content: h => content,
        onOk() {
          let api = flowServiceApi.restart({ taskId: record.taskId, type: record.processType })
          api.then((res) => {
            if (res.success) {
              that.$message.success(res.message ? res.message : '操作成功')
              that.onQuery()
            } else {
              that.$message.warn(res.message ? res.message : '操作失败')
            }
          }).catch(e => {
            that.$message.warn("操作失败！")
          })
        },
        class: 'confirm',
      })
    },
    // 获取组件的时间， prop为对应的字段，date为选中的时间值
    getChangeTime(prop, date) {
      if (prop === 'applicationTime') {
        this.$set(this.queryParam, 'applicationTimeState', date[0])
        this.$set(this.queryParam, 'applicationTimeEnd', date[1])
      }
    }
  }
}
</script>

<style scoped lang="less">
.text_color_1 {
  color: #108EE9;
}

.text_color_2 {
  color: #d9001b;
}
</style>
